<template>
    <div>
        <ul>
            <li>
                <span>事件</span>
                <span>日期</span>
                <span>状态</span>
                <span>操作</span>
            </li>
            <li v-for="item in list">
                <span>{{item.active}}</span>
                <span>{{item.date}}</span>
                <l-span :value="item.state"/>
                <l-btn v-if="item.state === 'wait'" @click="delEvt(item.id)" name="处理"/>
                <l-btn v-else @click="actEvt(item.id)" name="激活"/>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props:{
            list:{
                default:() => []
            }
        },
        methods:{
            delEvt(id){
                this.$emit('delEvt',id);
                console.log('自定义click事件触发，将去触发index中自定义delEvt事件');
            },
            actEvt(id){
                this.$emit('actEvt',id);
                console.log('自定义click事件触发，将去触发index中自定义actEvt事件');
            }

        }
    }
</script>

<style scoped>
    li{
        display: flex;
        justify-content: space-evenly;
        text-align: center;
    }
    li>*{
        flex: 1;
    }
</style>